See https://stackoverflow.com/questions/31402576/enable-focus-only-on-keyboard-use-or-tab-press for analysis how big players style it.

In #2799 I have described an issue for tab focus for button (and dropdown). As the PR is coded now, it will imply outline for :focus, ie. bold outline for buttons clicked by a mouse. This is not wanted.

Is there any way how to simply not add outline: none when :focus-visible is active? At least for browsers that support this pseudo class - https://caniuse.com/css-focus-visible.

Is there any way how to simply not add outline: none when :focus-visible is active? At least for browsers that support this pseudo class - caniuse.com/css-focus-visible.

Sure

.ui.button:focus-visible {
  outline: revert;
}

https://jsfiddle.net/lubber/y0ba824e/10/

Yes, please add this revert style for buttons and other important components.

Yes, please add this revert style for buttons and other important components.

No, are least not now, because that won't fit the FUI default theme and every browser displays that differently. If you want this consistent people should be able to define the outline as desired via changing the less variables in this PR.

And there are combinations like labeled input where this would need additional styling to look good.

If you don't care about all this, then i suggest to add this as custom css in your app. Putting this hardcoded into FUI ,i can already hear several people scream about the visual change in the next version

I consider this a bug. .ui.button:focus-visible selector will not focus visually on a button click nor if a button has no tabindex set. So there should be no visual change on anything except when a button is navigated via tab which deserves a proper styling. I belive the current Fomantic-UI simply does not account for tab focus styling.

One proof - a:focus-visible is styled currently natively as well. Just try it. Another proof - for ex. Google does not style it as well ;-).

So I propose:
a) revert the outline for button with .ui.button:focus-visible selector
b) fix tab visual focus of dropdown to match regular (styled by Fomantic-UI) input style (currently dropdown glow is based on open/close, not on (regular) focus)
c) review other outline: none/0 cases case by case

Here is a default FF style obtained from about:config FF:

preview:

so outline-offset (and maybe other CSS properties) needs to be reverted as well

Current Fomantic-UI button/dropdown/checkbox UX can be tested on https://dev.atk4.org/demos/form-control/input2.php.